{% load eventurl %}
{% load i18n %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=false">
    <style type="text/css">
        body {
            background-color: #eee;
            background-position: top;
            background-repeat: repeat-x;
            font-family: "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 20px;
            color: #333;
            margin: 0;
            padding-top: 20px;
        }

        table.layout > tr > td {
            background-color: white;
            padding: 0;
        }

        table.layout > tr > td.header {
            padding: 0 20px;
            text-align: center;
        }

        .header h2 {
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 22px;
            line-height: 26px;
        }

        .header h1 {
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 26px;
            line-height: 30px;
        }

        .header h2 a, .header h1 a, .content h2 a, .content h3 a {
            text-decoration: none;
        }

        .content h2, .content h3 {
            margin-bottom: 20px;
            margin-top: 10px;
        }

        a {
            color: {{ color }};
            font-weight: bold;
        }

        a:hover, a:focus {
            color: {{ color }};
            text-decoration: underline;
        }

        a:hover, a:active {
            outline: 0;
        }

        p {
            margin: 0 0 10px;

            /* These are technically the same, but use both */
            overflow-wrap: break-word;
            word-wrap: break-word;
            word-break: break-word;

            -ms-word-break: break-all;

            /* Adds a hyphen where the word breaks, if supported (No Blink) */
            -ms-hyphens: auto;
            -moz-hyphens: auto;
            -webkit-hyphens: auto;
            hyphens: auto;
        }
        p:last-child {
            margin-bottom: 0;
        }

        .footer {
            padding: 10px;
            text-align: center;
            font-size: 12px;
        }

        .content {
            padding: 0 18px;
        }

        ::selection {
            background: {{ color }};
            color: #FFF;
        }

        table.layout {
            width: 100%;
            max-width: 600px;
            border-spacing: 0px;
            border-collapse: separate;
            margin: auto;
        }

        img.wide {
            width: 100%;
            height: auto;
        }

        .content table {
            width: 100%;
        }

        .content table td {
            vertical-align: top;
            text-align: left;
            padding: 0;
        }

        a.button {
            display: inline-block;
            padding: 10px 16px;
            font-size: 14px;
            line-height: 1.33333;
            border: 1px solid #cccccc;
            border-radius: 6px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            margin: 5px;
            text-decoration: none;
            color: {{ color }};
        }

        .order-button {
            padding-top: 5px
        }
        .order-button a.button {
            font-size: 12px;
        }
        .order-info {
            padding-bottom: 5px
        }

        .order {
            font-size: 12px;
        }

        .cart-table > tr > td:first-child {
            width: 40px;
        }
        .order-details > tr > td:first-child {
            width: 20%;
        }
        .order-details td {
            font-size: 12px;
        }

        {% if rtl %}
            body {
                direction: rtl;
            }
            .content table td {
                text-align: right;
            }
        {% endif %}

        {% block addcss %}{% endblock %}
    </style>
    <!--[if mso]>
        <style type="text/css">
        body, table, td {
            font-family: "Open Sans", "OpenSans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
        }
        </style>
    <![endif]-->
</head>
<body align="center">
    <!--[if gte mso 9]>
    <table width="100%"><tr><td align="center">
    <table width="600"><tr><td align="center"
    <![endif]-->
    <table class="layout" width="600" border="0" cellspacing="0">
        <!--[if !mso]><!-- -->
        <tr>
            <td style="line-height: 0">
                <img class="wide" src=""
                style="max-height: 60px;">
            </td>
        </tr>
        <!--<![endif]-->
        <tr>
            <td class="header" align="center">
                <!--[if gte mso 9]>
                    <table cellpadding="20"><tr><td align="center">
                <![endif]-->
                {% if event %}
                    <h2><a href="{% abseventurl event "presale:event.index" %}" target="_blank">{{ event.name }}</a>
                    </h2>
                {% else %}
                    <h2><a href="{{ site_url }}" target="_blank">{{ site }}</a></h2>
                {% endif %}
                {% block header %}
                    <h1>{{ subject }}</h1>
                {% endblock %}
                <!--[if gte mso 9]>
                    </td></tr></table>
                <![endif]-->
            </td>
        </tr>
        {% include "pretixbase/email/separator.html" %}
        {% block content %}
        {% endblock %}
        <!--[if !mso]><!-- -->
        <tr>
            <td style="line-height: 0">
                <br>
                <img class="wide" src=""
                style="max-height: 60px;">
            </td>
        </tr>
        <!--<![endif]-->
    </table>
    <div class="footer">
        {% include "pretixbase/email/email_footer.html" %}
    </div>
    <br/>
    <br/>
    <!--[if gte mso 9]>
    </td></tr></table>
    </td></tr></table>
    <![endif]-->
</body>
</html>
